/* Navigation styles */
@import '../../styles/variables';
@import '../../styles/mixins';
@import './_DONavigationVariables';

$od-Navigation-columnPadding: 30px;

:global {
  .od-Navigation {
    width: 100%;
    max-width: $od-Header-bannerWidth;

    @media (min-width: $od-Header-bannerWidth) {
      height: $od-Header-height;
      margin: auto;
    }
  }

  .od-Navigation-links {
    width: auto;
    height: 100%;
    position: relative;
  }

  .od-Navigation-linkContainer {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: $ms-color-black;
    vertical-align: top;

    .ms-Icon {
      height: auto;
      position: relative;
      top: -4px;
    }

    &.is-open {
      .od-Navigation-link {
        background-color: $ms-color-neutralPrimaryAlt;
      }

      .od-Navigation-subMenu {
        display: block;
      }

      .ms-Icon {
        transform: rotateZ(180deg);
      }
    }

    // Responsive breakpoint
    @media (min-width: $od-Header-bannerWidth) {
      display: inline-block;
      width: auto;
    }
  }

  .od-Navigation-subMenu {
    background-color: $ms-color-neutralPrimaryAlt;
    width: 100vw;
    overflow: hidden;
    display: none;

    .ms-Grid,
    .ms-Grid-row {
      height: 100%;
    }

    .ms-Grid-col {
      padding-top: 12px;
    }

    @media (min-width: $od-Header-bannerWidth) {
      position: fixed;
      top: $od-Header-height;
      left: 0;
      height: 404px;
    }

    @include high-contrast {
      border: 1px solid WindowText;
    }
  }

  .od-Navigation-subMenuItems {
    width: $od-Header-bannerWidth;
    margin: auto;
    height: 100%;
  }

  .od-Navigation-subMenuItem {
    font-size: $ms-font-size-l - 1;
    line-height: 32px;
    width: 100%;
    display: block;
    color: $ms-color-white;

    &:focus {
      box-shadow: inset 0px 0px 0px 1px $ms-color-white;
      color: $ms-color-white;

      @include high-contrast {
        box-shadow: inset 0px 0px 0px 1px WindowText;
      }

      @include high-contrast-black-on-white {
        box-shadow: inset 0px 0px 0px 1px Highlight;
      }
    }

    &:hover {
      color: $ms-color-neutralLighter;
    }

    i {
      font-size: 16px;
      position: relative;
      width: 22px;
      height: 22px;
      margin-right: 6px;
      display: inline-block;
      vertical-align: top;
      margin-top: 5px;

      &:before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .od-Navigation-menuFirstColumn {
    padding-left: 30px;
    padding-bottom: 12px;

    @media (min-width: $od-Header-bannerWidth) {
      padding-bottom: 0;
      padding-left: 0;
    }
  }

  .od-Navigation-menuSecondColumn {
    background-color: $ms-color-neutralSecondary;
    height: 100%;
    padding-left: $od-Navigation-columnPadding;
  }

  .od-Navigation-menuThirdColumn {
    background-color: $ms-color-neutralSecondaryAlt;
    height: 100%;
    padding-left: $od-Navigation-columnPadding;
  }

  .od-Navigation-subMenuOverflowColor {
    background-color: $ms-color-neutralSecondaryAlt;
    height: 100%;
    width: 100vw;
    position: absolute;
    right: -100vw;
    top: 0;
  }

  .od-Navigation-searchContainer {
    width: 100%;
    position: relative;
    padding: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: $ms-color-neutralDark;

    @media (min-width: $od-Header-bannerWidth) {
      display: none;
    }
  }

  .od-Navigation-socialButtons {
    position: absolute;
    right: 0;
    height: 100%;
  }

  .od-Navigation-socialButton {
    display: inline-block;
    background-color: $ms-color-neutralDark;
  }
}
